<template>
<div id="top">
  <navigation></navigation>
  <div class="banner">
    <p>TOP30 PRESIDENCY</p>
    <p> COOPERATION ADMISSION</p>
    <p>TOP30名校合作录取
    </p>
    <div></div>
  </div>
  <div class="plan">
    <p>美国TOP30名校合作录取保进计划</p>
    <p>
      圆你常春藤名校梦<br> “GPA成绩不达标，托福/雅思屡战屡败，SAT/GRE始终未 能达到名校最低录取线”
      <br> “但是我有一个名校梦！”
      <br> 我们承诺：
      <span>只要符合评估最低要求，100%保录取！</span><br> “Top 30名校合作录取保进计划”<br> 我们专注并专业，只为成就你的梦想
    </p>
  </div>
  <div class="offer-show">
    <p>OFFER展示</p>
    <p>OFFER SHOW</p>
    <div class="item"></div>
    <div class="offers">
      <swiper :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <swiper-slide>
          <img src="../../assets/images/top/offer01.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img src="../../assets/images/top/offer02.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img src="../../assets/images/top/offer03.jpg" />
        </swiper-slide>
      </swiper>
      <div style="marginTop: 0.41rem; top: 20rem" class="swiper-pagination"></div>
    </div>
  </div>
  <div class="application-data">
    <p>TOP名校历年申请数据库</p>
    <p>APPLICATION DATABASE OF TOP FAMOUS<br> SCHOOL OVER THE YEARS</p>
    <div class="item"></div>
    <table class="data-table">
      <tr class="title">
        <td style="width: 2.35rem;">学校</td>
        <td style="width: 0.76rem;">2017</td>
        <td style="width: 1.72rem;">常年</td>
        <td style="width: 1.87rem;">保录取率</td>
      </tr>
      <tr>
        <td>Columbia<br>University</td>
        <td>48</td>
        <td>5.8%</td>
        <td>96.5%</td>
      </tr>
      <tr>
        <td>University of<br>Pennsylvania</td>
        <td>26</td>
        <td>5.5%</td>
        <td>97.6%</td>
      </tr>
      <tr>
        <td>University of<br>Chicago</td>
        <td>13</td>
        <td>6.3%</td>
        <td>100%</td>
      </tr>
      <tr>
        <td>University of<br>Southern Calif</td>
        <td>18</td>
        <td>5.2%</td>
        <td>100%</td>
      </tr>
      <tr>
        <td>JOHNS HOPKINS<br>University</td>
        <td>62</td>
        <td>5.5%</td>
        <td>97.6%</td>
      </tr>
      <tr>
        <td>Cornell<br>University</td>
        <td>18</td>
        <td>7.6%</td>
        <td>100%</td>
      </tr>
      <tr>
        <td>New York<br>University</td>
        <td>76</td>
        <td>6.5%</td>
        <td>100%</td>
      </tr>
      <tr>
        <td>Boston<br>University</td>
        <td>68</td>
        <td>7.5%</td>
        <td>100%</td>
      </tr>
      <tr>
        <td>Northeastern<br>University</td>
        <td>55</td>
        <td>7.3%</td>
        <td>100%</td>
      </tr>
    </table>
  </div>
  <div class="process">
    <p>办理流程</p>
    <p>PROCESSING PROCESS</p>
    <div class="item"></div>
    <div class="process-container">
      <div class="process-item">
        <img src="../../assets/images/top/top03.png" />
        <p>步骤一</p>
        <p>收集资料选校</p>
      </div>
      <div class="process-item left">
        <img src="../../assets/images/top/top04.png" />
        <p>步骤二</p>
        <p>进行可行性评估</p>
      </div>
      <div class="process-item left">
        <img src="../../assets/images/top/top05.png" />
        <p>步骤三</p>
        <p>签约</p>
      </div>
      <div class="process-item">
        <img src="../../assets/images/top/top06.png" />
        <p>步骤四</p>
        <p>支付定金</p>
      </div>
      <div class="process-item left">
        <img src="../../assets/images/top/top07.png" />
        <p>步骤五</p>
        <p>出具offer付清尾款</p>
      </div>
      <div class="process-item left">
        <img src="../../assets/images/top/top03.png" />
        <p>步骤六</p>
        <p>出具1-20办理<br>入学手续</p>
      </div>
    </div>
  </div>
  <div class="under">
    <p>本科院校</p>
    <p>UNDERGRADUATE COLLEGES AND UNIVERSITIES</p>
    <div class="item"></div>
    <div class="school-intro">
      <div @click="goPage('/service/top/detail/' + item.id)" v-for="item of data.ben" class="school-item">
        <img :src="item.picture" />
        <p>{{item.name}}</p>
        <p>2018 US NEWS 排名 #{{item.id}}<br> 学费：{{item.tuition}}
          <br> 申请截止日期
          <br> 秋季 {{item.autumn}}<br> 转学 {{item.transfer}}</p>
      </div>
    </div>
  </div>
  <div class="under">
    <p>研究生院校</p>
    <p>GRADUATE SCHOOL</p>
    <div class="item"></div>
    <div class="school-intro">
      <div @click="goPage('/service/top/detail/' + item.id)" v-for="item of data.yan" class="school-item">
        <img :src="item.picture" />
        <p>{{item.name}}</p>
        <p>2018 US NEWS 排名 #{{item.id}}<br> 学费：{{item.tuition}}
          <br> 申请截止日期
          <br> 秋季 {{item.autumn}}<br> 转学 {{item.transfer}}</p>
      </div>
    </div>
  </div>
  <pageFooter style="marginTop: 0.63rem;"></pageFooter>
</div>
</template>
<script>
import navigation from "@/components/navigation/index";
import pageFooter from "@/components/footer/index";

import {
  NetworkUtil
} from "@/lib/util"

import {
  swiper,
  swiperSlide
} from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide,
    navigation,
    pageFooter
  },
  data() {
    return {
      data: {},
      swiperOption: {
        autoplay: true,
        speed: 1000,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          type: 'custom',
          renderCustom: function(swiper, current, total) {
            const activeColor = '#fff'
            const normalColor = '#979797'
            let color = ''
            let paginationStyle = ''
            let html = ''
            for (let i = 1; i <= total; i++) {
              if (i === current) {
                color = activeColor
              } else {
                color = normalColor
              }
              paginationStyle = `background:${color};opacity:1;margin-right:0.16rem;width:0.25rem;height:0.25rem;border-radius:50%;`
              html += `<span class="swiper-pagination-bullet" style=${paginationStyle}></span>`
            }
            return html
          }
        },
      }
    }
  },
  created() {
    NetworkUtil.request({
      url: '/api/service/top',
      method: 'get'
    }, info => {
      this.data = info
      for (let item of this.data.ben) {
        item.picture = 'https://www.keywinus.com/' + item.picture
      }
      for (let item of this.data.yan) {
        item.picture = 'https://www.keywinus.com/' + item.picture
      }
    }, err => {
      console.log(err)
    }, {
      cacheName: 'top',
      cacheTime: 1800000,
      isNow: true
    })
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    },
  },
  methods: {
    goPage(path) {
      this.$router.push(path)
    }
  }
}
</script>
<style lang="less" rel="stylesheet/less">
@import "index.less";
@import "../../assets/css/swiper.min.css";
</style>
